<template>
  <div class="box">
    <div class="header">
      <div class="l" @click="toCity">西安</div>
      <div class="m" @click="toSearch">
        <p>Hg</p>
        <span class="line">
          <span>|</span>
        </span>
        <span class="iconfont icon-sousuo"></span>
        <span>请输入搜索关键字</span>
      </div>
      <div class="r" @click="toLogin" v-show="user">请登录</div>
      <div class="r" @click="backLogin" v-show="!user">已登陆</div>
    </div>
    <!-- 轮播图 -->
    <div class="main" @scroll="scrollMe" ref="main">
      <!-- 下拉刷新 -->
      <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
          <van-swipe-item v-for="(item, index) in bannerList" :key="index">
            <img :src="item.imgurl" />
          </van-swipe-item>
        </van-swipe>
        <!-- grid布局 -->
        <div class="top10">
          <van-grid :column-num="5" :border="true">
            <van-grid-item
              v-for="item in navList"
              :key="item.navid"
              :icon="item.imgurl"
              :text="item.title"
            />
          </van-grid>
        </div>
        <!-- 倒计时部分 -->
        <div class="top10">
          haigo秒杀
          <van-count-down :time="time">
            <template #default="timeData">
              <span class="block">{{ timeData.hours }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.minutes }}</span>
              <span class="colon">:</span>
              <span class="block">{{ timeData.seconds }}</span>
            </template>
          </van-count-down>
        </div>
        <!-- 秒杀数据 -->
        <div class="seckill">
          <ul
            v-for="item in seckillList"
            :key="item.proid"
            @click="jumpTo(item.proid)"
          >
            <li>
              <van-image width="60" height="60" :src="item.img1" />
              <p>￥{{ item.originprice }}</p>
            </li>
          </ul>
        </div>
        <!-- 商品数据部分 -->
        <!-- 上拉刷新 -->
        <div class="goods">
          <van-list
            v-model="loading"
            :finished="finished"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <!-- 点击切换布局 -->
            <ul
              :class="isShow ? 'proList2' : 'proList1'"
              v-for="(item, index) in proList"
              :key="index"
              @click="toDetail(item.proid)"
            >
              <li class="van-hairline--bottom van-hairline--right">
                <img width="100%" :src="item.img1" alt="" />
                <div>
                  <h4>{{ item.proname }}</h4>
                  <p>￥{{ item.originprice }}</p>
                </div>
              </li>
            </ul>
          </van-list>
        </div>
        <!-- 引入图标 切换页面-->
        <div class="toggle" @click="isShow = !isShow">
          <van-icon name="bars" v-if="isShow" />
          <van-icon name="apps-o" v-else />
        </div>
        <!-- 回到顶部 图标 -->
        <div class="toTop" @click="backTop" v-if="scrollTop > 600">
          <van-icon name="back-top" />
        </div>
      </van-pull-refresh>
    </div>
  </div>
</template>

<script>
import {
  getBannerList,
  getNavList,
  getSeckillList,
  getProList,
} from "../api/home";
import Vue from "vue";
import {
  Swipe,
  SwipeItem,
  Grid,
  GridItem,
  CountDown,
  Image as VanImage,
  Icon,
  List,
  PullRefresh,
  Dialog,
} from "vant";

Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(CountDown);
Vue.use(VanImage);
Vue.use(Icon);
Vue.use(List);
Vue.use(PullRefresh);
Vue.use(Dialog);
export default {
  name: "Home",
  components: {},
  data() {
    return {
      navList: [],
      bannerList: [],
      time: 24 * 60 * 60 * 1000,
      seckillList: [],
      isShow: true,
      proList: [],
      loading: false,
      finished: false,
      count: 2,
      isLoading: false,
      scrollTop: 0,
      timer: null,
      user: true,
    };
  },
  methods: {
    onLoad() {
      this.loading = true;
      setTimeout(() => {
        getProList({ count: this.count, limitNum: 12 }).then((data) => {
          this.loading = false;
          if (data.data.data.length == 0) {
            this.finished = true;
          } else {
            this.proList = [...this.proList, ...data.data.data]; // this.prolist = 原有的数据+ 新加载出来的数据
            this.count++;
          }
        });
      }, 1500);
    },
    toSearch() {
      this.$router.push("Search");
    },
    toLogin() {
      this.$router.push("Login");
    },
    backLogin() {
      Dialog.confirm({
        message: "已登录，是否退出登录",
      })
        .then(() => {
          // on confirm
          localStorage.removeItem("token");
          this.$router.go(0);
        })
        .catch(() => {
          // on cancel
        });
    },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
    },
    toDetail(proid) {
      console.log(proid);
      this.$router.push("/detail/" + proid);
    },
    onRefresh() {
      setTimeout(() => {
        this.isLoading = false;
        getProList().then((res) => {
          // 加载第一页
          this.proList = res.data.data;
          this.count = 2;
        });
      }, 1000);
    },
    scrollMe() {
      this.scrollTop = this.$refs.main.scrollTop;
    },
    backTop() {
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 15);
    },
    toCity(){
      this.$router.push("/city")
    }
  },
  created() {
    getBannerList().then((res) => {
      this.bannerList = res.data;
    });
    getNavList().then((res) => {
      this.navList = res.data;
    });
    getSeckillList().then((res) => {
      this.seckillList = res.data.data;
    });
  },
  mounted() {
    if (localStorage.getItem("token")) {
      this.user = false;
    } else {
      this.user = true;
    }
  },
};
</script>
<style scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  font-size: 20px;
  line-height: 150px;
  text-align: center;
  background-color: #39a9ed;
}

.m {
  display: flex;
  align-items: center;
}
.m p {
  color: red;
  font-weight: bold;
  font-family: "隶书";
  margin-left: 10px;
}
.m .line {
  margin: 0 6px;
}
.m .line span {
  width: 20px;
}
span:nth-child(3) {
  line-height: 24px;
  font-size: 5px;
  color: #999;
}
span:nth-child(4) {
  font-size: 5px;
  color: #999;
  margin-left: 5px;
}
.my-swipe {
  height: 1.8rem;
}
.my-swipe img {
  height: 100%;
}
.top10 {
  margin-top: 0.1rem;
  background-color: #fff;
  display: flex;
  font-size: 5px;
  font-family: "正楷";
  color: #999;
}
.colon {
  display: inline-block;
  margin: 0 4px;
  color: #ee0a24;
}
.block {
  display: inline-block;
  width: 22px;
  color: #fff;
  font-size: 12px;
  text-align: center;
  background-color: #ee0a24;
}
.seckill {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  color: red;
  margin-bottom: 0.1rem;
}

.proList1 {
  width: 100%;
  background-color: #fff;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.proList1 li {
  width: 100%;
  display: flex;
  padding: 10px;
  box-sizing: border-box;
  text-align: left;
}
.proList1 li div h4,
.proList2 li div h4 {
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #434343;
  font-weight: normal;
}
.proList1 li div p,
.proList2 li div p {
  padding-top: 0.1rem;
  color: red;
}
.proList1 li img {
  width: 35%;
  margin-right: 10px;
}
.proList2 li {
  display: flex;
}
.proList2 li img {
  width: 30%;
  height: 0.8rem;
  border-radius: 5%;
}
.proList2 li div {
  flex: 1;
  background-color: #fff;
  padding-left: 0.1rem;
}
.toggle {
  position: fixed;
  bottom: 0.6rem;
  right: 0.3rem;
  width: 0.3rem;
  height: 0.3rem;
  border: 2px solid #999;
  text-align: center;
  text-align: center;
  line-height: 0.3rem;
  border-radius: 50%;
}
.toTop {
  position: fixed;
  bottom: 1rem;
  right: 0.3rem;
  width: 0.3rem;
  height: 0.3rem;
  border: 2px solid #999;
  text-align: center;
  text-align: center;
  line-height: 0.3rem;
  border-radius: 50%;
}
</style>
